<template>
  <a-modal v-model:open="visible" :mask-closable="false" :width="`${width}mm`">
    <a-spin :spinning="spinning" style="min-height: 100px">
      <div id="preview_content_design"></div>
    </a-spin>

    <!--    -->
    <template #title>
      <a-space>
        <a-button :loading="waitShowPrinter" type="primary" @click.stop="print">
          <i class="iconfont sv-print" /><span style="margin-left: 5px;">打印</span>
        </a-button>
        <a-button type="primary" @click.stop="toPdf">
          <i class="iconfont sv-pdf" /><span style="margin-left: 5px;">PDF打印</span>
        </a-button>
      </a-space>
    </template>

    <!--    -->
    <template #footer>
      <a-button key="close"  @click="hideModal">
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script setup>
import {onMounted, ref} from 'vue';

const visible = ref(false);
const spinning = ref(true);
const waitShowPrinter = ref(false);

const width = ref(0);
const hiprintTemplate = ref({});
const printData = ref({});

onMounted(() => {

})

/**
 * 打开窗口
 * @param template 模板数据
 * @param data 打印数据
 * @param w 窗口宽度
 */
const show = (template, data, w = '210') => {
  visible.value = true;
  spinning.value = true;
  width.value = template.editingPanel ? template.editingPanel.width : w;

  //
  hiprintTemplate.value = template;
  printData.value = data;

  setTimeout(() => {
    // eslint-disable-next-line no-undef
    $('#preview_content_design').html(template.getHtml(data));
    spinning.value = false;
  }, 500);
}

/**
 * 打印
 */
function print(){
  waitShowPrinter.value = true;

  hiprintTemplate.value.print(printData.value, {}, {
    callback: () => {
      console.log('callback');
      waitShowPrinter.value = false;
    }
  });
}

/**
 * PDF打印
 */
function toPdf (){
  hiprintTemplate.value.toPdf(printData.value, 'PDF打印');
}

/**
 * 关闭
 */
function hideModal() {
  visible.value = false;
}

defineExpose({
  show,
})

</script>

<style scoped>
/deep/ .ant-modal-body {
  padding: 0px;
}

/deep/ .ant-modal-content {
  margin-bottom: 24px;
}

::v-deep .hiprint-printPanel .hiprint-printPaper:last-child {
  margin-left: -24px;
}

::v-deep .hiprint-printPaper {
  position: relative;
  padding: 0 0 0 0;
  page-break-after: always;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  overflow-x: hidden;
  overflow: hidden;
  margin-left: -24px;
}
</style>
